<template>
  <div class="box">
    <div class="content">
      <header>
        <el-descriptions class="margin-top" :column="3" border size="mini">
          <el-descriptions-item>
            <template slot="label">
              <div class="text-center">用户名</div>
            </template>
            <el-input placeholder="" :value="fromData.username"></el-input>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <div class="text-center">姓名</div>
            </template>
            <el-input placeholder="" :value="fromData.username"></el-input>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <div class="text-center">密码</div>
            </template>
            <div style="display: flex;">
              <el-input placeholder="18100000000" :value="fromData.psw"></el-input>
              <el-button style="margin-left: 10px;" type="primary" plain>确认修改</el-button>
            </div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <div class="text-center">电话</div>

            </template>
            <el-input placeholder="" :value="fromData.tel"></el-input>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <div class="text-center">部门</div>
            </template>
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <div class="text-center">登录模式</div>
            </template>
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <div class="text-center">是否启用</div>
            </template>
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <div class="text-center">有效期</div>
            </template>
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <div class="text-center">IPPush判断</div>
            </template>
            <el-checkbox v-model="fromData.checked">登录此账号需判定IPPush(局域网48小时内IPPush记录)</el-checkbox>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <div class="text-center">是否企达内部员工账号</div>
            </template>
            <el-checkbox v-model="fromData.checked">勾选后将对客户隐藏</el-checkbox>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <div class="text-center">驾校名称</div>
            </template>
            <div style="display: flex;">
              <el-select v-model="value" filterable placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <el-input class="ml-1" placeholder="" :value="fromData.tel" disabled></el-input>
            </div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <div class="text-center">备注</div>
            </template>
            <el-input placeholder="" :value="fromData.tel"></el-input>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <div class="text-center">修改人</div>
            </template>
            <el-input placeholder="" :value="fromData.tel" disabled></el-input>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <div class="text-center">修改IP</div>
            </template>
            <el-input placeholder="" :value="fromData.tel" disabled></el-input>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">

              <div class="text-center">是否确定修改</div>
            </template>
            <el-button type="primary" class="mr-1">确定</el-button>
            <el-button>取消</el-button>
          </el-descriptions-item>


        </el-descriptions>
      </header>

      <main>
        <div class="title mt-3 d-flex j-sb">
          <div>绑定微信(电脑版账号)列表</div>
          <div style="color: #409EFF;cursor: pointer;" @click="dialogVisible = true">查看绑定的挂靠点</div>
        </div>

        <div style="height: 380px;">
          <el-table :data="tableData" border style="width: 100%" height="100%">
            <el-table-column fixed prop="date" label="ID" width="150">
            </el-table-column>
            <el-table-column prop="name" label="jxid" width="150">
            </el-table-column>
            <el-table-column prop="province" label="头像" width="150">
            </el-table-column>
            <el-table-column prop="city" label="昵称" width="150">
            </el-table-column>
            <el-table-column prop="address" label="真实姓名" width="200">
            </el-table-column>
            <el-table-column prop="zip" label="性别" width="120">
            </el-table-column>
            <el-table-column prop="zip" label="电话" width="200">
            </el-table-column>
            <el-table-column prop="zip" label="备注" width="500">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <el-dialog title="绑定的挂靠点" :visible.sync="dialogVisible" width="80%">
          <div style="height: 300px;">
            <el-table :data="tableData" border style="width: 100%" height="100%">
              <el-table-column prop="date" label="CID" width="200">
              </el-table-column>
              <el-table-column prop="name" label="挂靠点名称" width="400">
              </el-table-column>
              <el-table-column prop="province" label="挂靠点/直营" width="400">
              </el-table-column>
              <el-table-column prop="province" label="合作状态" width="300">
                </el-table-column>
              <el-table-column label="操作" width="195">
                <template slot-scope="scope">
                  <el-button type="text" size="small">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-dialog>

        <div class="text-primary mt-1 font-14">共100条记录</div>
      </main>
    </div>
  </div>
</template>

<script>
/**
* @author        chenRong
* @time          2023-10-31 17:54:54  星期二
* @description   账户基本资料
**/

export default {
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '奥利奥'
        }
      ],
      fromData: {
        username: '张伟',
        psw: '666',
        tel: '10086',
        date: '',
        checked: true
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }],
      dialogVisible: false

    }
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-select {
  width: 100%;
}

.box {
  background-color: white;
  padding: 0px;
  .title {
    margin-bottom: 20px;
    color:#333;
  }
}
</style>